<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:我的邀请页面
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
 -->
<template>
	<view class="page" :style="'background-image:url(/static/share1.png)'">
		<view class="blank-box"></view>
		<view class="content-wrapper">
			<view class="qr-box">
				<image class="share-qr" :src="`https://api.pwmqr.com/qrcode/create/?url=${config.share_url}`" mode="widthFix"></image>
			</view>
			<view class="invite-code" v-if="user" @tap="copyInviteCode()">邀请码:<text style="color:#e9420b;">{{user.invit_code}}</text></view>
			<view v-else class="invite-code">您还未登陆</view>
			<view style="margin-top: 20rpx;text-align: center;">扫二维码进行下载</view>
			<view style="margin-top: 20rpx;text-align: center;padding-bottom: 40rpx;">可直接访问<text style="color:#e9420b;">{{config.share_url}}</text></view>
		</view>

		<view class="bottom-box">
			<image style="width: 100rpx;height: 80rpx;" src="/static/save_pic.png" @tap="saveQr"></image>
			<image style="width: 125rpx;height: 80rpx;" src="/static/share_btn.png" @tap="copyUrl"></image>
		</view>
		<view style="width: 1px;height: 1px;overflow:hidden;" v-if="saveing">
			<canvas canvas-id="save" style="width: 750px;height:1333px;"></canvas>
		</view>
	</view>
</template>

<script>
	import advertPage from "@/components/advert/advert-page.vue"

	export default {
		components: {
			advertPage
		},
		data() {
			return {
				saveing: false
			}
		},
		methods: {
			saveQr() {
				const url = `https://api.pwmqr.com/qrcode/create/?url=${this.config.share_url}`
				
				uni.showLoading({
					mask: true,
					title: "正在保存二维码"
				})

				uni.downloadFile({
					url,
					success: ({ statusCode, tempFilePath }) => {
						if (statusCode === 200) {
							uni.saveImageToPhotosAlbum({
							    filePath: tempFilePath,
							    success: () => {
							        uni.showToast({
							        	title: '保存成功',
										icon: 'success'
							        })
							    },
								fail: () => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			copyInviteCode() {
				uni.setClipboardData({
					data: this.user.invit_code,
					success() {
						uni.showToast({
							title: "复制成功"
						})
					}
				})
			},
			copyUrl() {
				uni.setClipboardData({
					data: this.config.share_url + " 邀请码:" + this.user.invit_code,
					success() {
						uni.showToast({
							title: "复制成功"
						})
					}
				})
			},
			myGold() {
				uni.navigateTo({
					url: "/pages/index/user/withdraw"
				})
			},
			invitePage() {
				uni.navigateTo({
					url: "/pages/index/user/invite"
				})
			}

		},
		computed: {
			user() {
				return this.$store.state.user
			},
			config() {
				return this.$store.state.config;
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: $uni-bg-color !important;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		width: 750rpx;

		.blank-box {
			height: 300rpx;
		}

		.content-wrapper {
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 50rpx;

			.qr-box {
				text-align: center;
				padding: 40rpx;
			}

			.share-qr {
				width: 400rpx;
				height: 400rpx;
			}

			.invite-code {
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
			}
		}


		.bottom-box {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			width: 450rpx;
		}
	}
</style>
